const chooseLocation = requirePlugin('chooseLocation');
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: 'FYXBZ-P4VKD-B4I4J-HYTLP-4L4S2-76FUD' // 必填
});

Page({


  data: {
    location: {
      latitude: 0,
      longitude: 0
    },
    circles: [],
    markers: [],
    customCalloutMarkers: [],
    addressName: '',
    // animationData : {}
  },

  // 气泡点击
  callouttap(e) {
    this.scaleAnimation(e);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    // 清除保存的选择地址数据
    let selectData = wx.getStorageSync('selectData');
    if (selectData.longitude > 0) {
      wx.setStorageSync('selectData', {});
    }

    // 获取定位数据
    this.getLocationInfo();


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

    // 创建map上下文  保存map信息的对象
    this.mapContext = wx.createMapContext('mapStyle')
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {


    // 选择地址之后，清除之前的数据
    let selectData = wx.getStorageSync('selectData');

    if (selectData.longitude > 0) {
      this.setData({
        markers: [],
        customCalloutMarkers: []
      })

      // 设置经纬度，地址名，画圆，设置图标marker
      this.setData({

        addressName: selectData.title,
        location: {
          latitude: selectData.latitude,
          longitude: selectData.longitude
        },
        circles: [{
          latitude: selectData.latitude,
          longitude: selectData.longitude,
          color: '#F4D7D8', // 描边的颜色
          fillColor: '#F4D7D855', // 填充颜色
          radius: 250, // 半径
          strokeWidth: 0 // 描边的宽度
        }],
        markers: [{
          id: -1,
          iconPath: "../../images/wiezhi.png",
          latitude: selectData.latitude,
          longitude: selectData.longitude,
          width: 50,
          height: 50,
        }]


      })

      // 生成随机停车场
      this.tocreate(selectData)
    }
  },

  // 获取当前定位信息
  getLocationInfo: function () {

    let that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {

        console.log('res = ', res);
        console.log("经度", res.latitude);
        console.log("纬度", res.longitude);

        wx.setStorageSync('mapLatitude', res.latitude);
        wx.setStorageSync('mapLongitude', res.longitude);

        // 根据经纬度获取地址信息
        that.getAddress(res.latitude, res.longitude, that)

        that.setData({

          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          circles: [{
            latitude: res.latitude,
            longitude: res.longitude,
            color: '#F4D7D8', // 描边的颜色
            fillColor: '#F4D7D855', // 填充颜色
            radius: 250, // 半径
            strokeWidth: 0 // 描边的宽度
          }],
          markers: [{
            id: -1,
            iconPath: "../../images/wiezhi.png",
            latitude: res.latitude,
            longitude: res.longitude,
            width: 50,
            height: 50,
          }]


        })


        that.tocreate(res) //生成随机单车
      }
    })
  },

  // 随机函数，模拟附近停车场位置
  tocreate(res) {
    // 随机停车场数量设置
    let markers = this.data.markers;
    let ran = Math.ceil(Math.random() * 20);

    for (let i = 0; i < ran; i++) {

      // 随机
      var sign_a = Math.random();
      var sign_b = Math.random();
      // 单车分布密集度设置
      var a = (Math.ceil(Math.random() * 99)) * 0.00002;
      var b = (Math.ceil(Math.random() * 99)) * 0.00002;
      var num = Math.ceil(Math.random() * 99);

      let lat = (sign_b > 0.5 ? res.latitude + b : res.latitude - b);
      let lon = (sign_a > 0.5 ? res.longitude + a : res.longitude - a);

      // 定义一个临时单车对象
      let t_bic = {
        id: i,
        iconPath: "../../images/stopCar.png",
        latitude: lat,
        longitude: lon,
        width: 0,
        height: 0,
        // label: {
        //   content: String(num),
        //   color: '#3197F3',
        //   fontSize: 14,
        //   bgColor: "#fff",
        //   borderRadius: 30,
        //   padding: 5,
        //   // anchorX:-13,
        //   anchorY: -5,
        //   textAlign: 'center',
        // },
        customCallout: { //自定义气泡
          display: "ALWAYS", //显示方式，可选值BYCLICK
          anchorX: 0, //横向偏移
          anchorY: 0,
        },
        // callout:{//不适用自定义气泡的东西，在这里面写样式和内容
        //   content:String(num),
        //   textAlign:"center",
        //   color:"#fff",
        //   padding: 6,
        //   borderRadius : 16,
        //   borderWidth:0,
        //   bgColor:'rgba(49,151,243,1.0)',//背景颜色，可使用rgba
        //   anchorY:30,
        //   fontSize:16,
        //   display:"ALWAYS",
        // }
      }
      markers.push(t_bic);
    }
    //将模拟的单车数据暂时存储到本地
    wx.setStorageSync('bicycle', markers);
    this.setData({
      markers
    })

    // 生成停车场随机数量
    this.getCustomCalloutMarkers();


  },

  // 获取停车场数量数据
  getCustomCalloutMarkers() {

    // 随机停车场数量设置
    let customCalloutMarkers = this.data.customCalloutMarkers;
    let ran = Math.ceil(Math.random() * 20 + 5);
    let markers = this.data.markers;

    for (let i = 0; i < markers.length; i++) {

      var num = Math.ceil(Math.random() * 99);

      // 定义一个停车场对象
      let t_bic = {
        id: i,
        showMsg: String(num),
        animationData: {

        }
      }
      customCalloutMarkers.push(t_bic);

    }

    this.setData({
      customCalloutMarkers
    })

    console.log('自定义的气泡数据', this.data.customCalloutMarkers, this.data.markers);
  },

  // 根据经纬度获取当前的地址信息
  getAddress(latitude, longitude, self) {


    qqmapsdk.reverseGeocoder({
      //位置坐标，默认获取当前位置，非必须参数
      /**
       * 
       //Object格式
        location: {
          latitude: 39.984060,
          longitude: 116.307520
        },
      */
      /**
       *
       //String格式
        location: '39.984060,116.307520',
      */
      // location: e.detail.value.reverseGeo || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
      //get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) { //成功后的回调
        console.log('经纬度获取的地址信息', res.result);

        // 保存地址信息
        wx.setStorageSync('mapAddressName', res.result.formatted_addresses.recommend);

        self.setData({
          addressName: res.result.formatted_addresses.recommend
        })

      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    })
  },
  // 放大动画
  scaleAnimation: function (e) {

    // 1.5倍动画状态

    let index = e.detail.markerId;
    let customCalloutMarkers = this.data.customCalloutMarkers;

    // 标识符
    let flag;


    // 放大状态
    for (let i = 0; i < customCalloutMarkers.length; i++) {

      let data = customCalloutMarkers[i];

      if (index === data.id) {
        if (index === -1) {
          // 中间定位图标点击不处理
        } else {

          // 动画实例
          let animation = wx.createAnimation({
            duration: 1000,
            timingFunction: 'linear',
            delay: 0
          });
          animation.scale(1.5, 1.5).step();
          data.animationData = animation.export();
          flag = i;
        }
      }
    }

    // 把其他都变成未动画状态
    for (let j = 0; j < customCalloutMarkers.length; j++) {
      let data = customCalloutMarkers[j];
      if (j === flag) {

      } else {
        // 动画实例
        let animation = wx.createAnimation({
          duration: 1000,
          timingFunction: 'linear',
          delay: 0
        });
        animation.scale(1.0, 1.0).step();
        data.animationData = animation.export();
      }

    }

    this.setData({
      customCalloutMarkers
    })

  },

  // 顶部搜索点击
  topViewClick() {
    console.log("------------------------");
    wx.navigateTo({
      url: '../search/search',
    })
  }

})